<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        var usernameEle = document.querySelector("#username");
        var ageEle = document.querySelector("#age");
        var genderEle = document.querySelector("#gender");

        var addBtn = document.querySelector("#addBtn");
        var tbody = document.querySelector("#table tbody");
        // addBtn.onclick = function(){
        //     var username = usernameEle.value;
        //     var age = ageEle.value;
        //     var gender = genderEle.value;
        //     // console.log(username,age,gender);
        //     var trEle = document.createElement("tr");
        //     trEle.innerHTML = `<td>${username}</td><td>${age}</td><td>${gender}</td><td class="del">删除</td>`;
        //     var del = trEle.querySelector(".del");
        //     del.onclick = function(){
        //         // console.log("del");
        //         // console.log(this);
        //         this.parentNode.remove();
        //     }
        //     tbody.appendChild(trEle);
        //     // var dels = document.querySelectorAll(".del");
        //     // console.log(dels);
        // }


        // 数据驱动
        // var arr = [
        //     {
        //         username:"张三",
        //         age:20,
        //         gender:"男"
        //     },{
        //         username:"李四",
        //         age:18,
        //         gender:"男"
        //     },{
        //         username:"王五",
        //         age:23,
        //         gender:"女"
        //     },
        //     {
        //         username:"王小六",
        //         age:23,
        //         gender:"女"
        //     }
        // ]

        var arr = [];
        addBtn.onclick =  function(){
            var username = usernameEle.value;
            var age = ageEle.value;
            var gender = genderEle.value;
            var obj = {
                username:username,
                age:age,
                gender:gender
            }
            // console.log(obj);
            arr.push(obj);
            console.log(arr);
            renderDom(arr);
            // // 删除 ： 删除对象数组里对应的对象 ，然后再渲染到页面上；

            // removeUser();  //给添加的table添加删除的点击事件；

        }


        // 把数组渲染到dom中
        function renderDom(arr){
            tbody.innerHTML = "";  //把原本的内容清空掉；
            arr.forEach(function(item){
                var trEle = document.createElement("tr");
                trEle.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td class="del">删除</td>`;
                tbody.appendChild(trEle);
            })
            removeUser();
        }
        // renderDom(arr);

        function removeUser(){
            // 先删除数据，然后再渲染视图；
            var delEles = document.querySelectorAll(".del");
            delEles.forEach(function(item,key){
                // console.log(item);
                item.onclick = function(){
                    // console.log("点击了删除按钮");
                    // 删除数据；
                    // console.log(key);
                    arr.splice(key,1);
                    console.log(arr);
                    renderDom(arr);
                }
            })
        }

        var sortBtn = document.querySelector("#sortBtn");
        sortBtn.onclick = function(){
            arr.sort(function(a,b){
                return a.age-b.age
            })

            console.log(arr);
            renderDom(arr);
        }

    //     var arr = [
    //         {
    //             username:"张三",
    //             age:20,
    //             gender:"男"
    //         },{
    //             username:"李四",
    //             age:18,
    //             gender:"男"
    //         },{
    //             username:"王五",
    //             age:23,
    //             gender:"女"
    //         },
    //         {
    //             username:"王小六",
    //             age:22,
    //             gender:"女"
    //         }
    //     ]

    // //    var arr = [{num:1},{num:3},{num:2}];
    //     arr.sort(function(a,b){
    //         return a.age-b.age;
    //     })
    //     console.log(arr);



    </script>
</body>

</html>